import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { connect } from 'react-redux'
import { classNames, navigateTo } from '@/utils'
import './index.scss'

function SpTabs (props) {
  let { tablist = [], current, onChange, children } = props


  return (
    <View className='sp-tabs'>
      <View className='sp-tabs-hd'>
        {tablist.map((tab, index) => (
          <View
            className={classNames({
              'tab-item': true,
              'tab-item-active': current == index
            })}
            key={`tab-item__${index}`}
            onClick={onChange.bind(this, index)}
          >
            {tab.icon && <Text className={classNames(`iconfont`, tab.icon)}></Text>}
            <Text className='name'>{tab.title}</Text>
          </View>
        ))}
      </View>
      <View className='sp-tabs-bd'>{children}</View>
    </View>
  )
}

export default SpTabs
